<template>
  <div class="main">
    <p class="main_text">监销车</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="searchData">
        <div class="df fww">
          <el-form-item label="车牌号：">
            <el-input v-model="searchData.carId" placeholder="车牌号" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="车辆类型：">
            <el-input v-model="searchData.carType" placeholder="车辆类型" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="车辆品牌：">
            <el-input v-model="searchData.brand" placeholder="车辆品牌" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="是否监销：">
            <el-select v-model="searchData.monited" clearable placeholder="是否监销" class="mr20" style="width: 140px">
              <el-option label="未监销" value="0" />
              <el-option label="同意监销" value="1" />
              <el-option label="拒绝监销" value="2" />
              <!-- <el-option label="全部" value="" /> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="df">
              <el-button type="primary" @click="searchDataBtn">查询</el-button>
              <el-button type="primary" plain @click="resc">重置</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <div class="mb20">
        <el-button type="primary" plain @click="exportExcel" v-if="roleList.write">导出所有信息</el-button>
      </div>
      <div class="cyr-flex-box">
      <el-table :data="tableData" :header-cell-style="{ background: '#f0f6fe' }"
         :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column label="编号" prop="id" width="60" />
        <el-table-column label="车牌号" prop="carInfo.value.号牌号码" :show-overflow-tooltip="true" />
        <el-table-column label="车主" prop="carInfo.value['所有人']" :show-overflow-tooltip="true" />
        <el-table-column label="车辆类型" prop="carInfo.value.车辆类型" :show-overflow-tooltip="true" />
        <el-table-column label="车辆品牌" prop="brand" :show-overflow-tooltip="true" />
        <el-table-column label="车系" prop="series" :show-overflow-tooltip="true" />
        <el-table-column label="车型" prop="modelName" :show-overflow-tooltip="true" />
        <el-table-column label="发动机号" prop="carInfo.value.发动机号码" :show-overflow-tooltip="true" />
        <el-table-column label="车架号" prop="carInfo.value.车辆识别代号" :show-overflow-tooltip="true" />
        <el-table-column label="档案编号" prop="carInfo.value.档案编号" :show-overflow-tooltip="true" />
        <el-table-column label="车辆颜色" prop="color" :show-overflow-tooltip="true" />
        <el-table-column label="入场编号" prop="incomeId" :show-overflow-tooltip="true" />
        <el-table-column label="入库时间" prop="createdAt" :show-overflow-tooltip="true" />
        <el-table-column label="是否监销" min-width="100">
          <template #default="props">
            <el-tag v-if="props.row.monited == 0" type="info">未监销</el-tag>
            <el-tag v-else-if="props.row.monited == 1" type="success">同意</el-tag>
            <el-tag v-else type="warning">拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="拒绝原因" prop="rejectReason" :show-overflow-tooltip="true" />
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="props">
            <el-button v-if="props.row.monited != 1 && props.row.monited != 2 && roleList.write" size="small" link
              type="primary" @click="confirm(props.row)">监销</el-button>
            <el-button v-if="props.row.monited != 0 && roleList.write" size="small" link type="warning"
              @click="cancel(props.row)">撤销</el-button>
          </template>
        </el-table-column>
        <!-- #################################### 分页 #################################### -->
      </el-table>
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
      </div>
    </div>
    <!-- ****************************** 提交审核 ****************************** -->
    <el-dialog class="dialog" v-model="checkcenterDialogVisible" width="40%" align-center @close="closeDialog">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">审核</p>
        </div>
      </template>
      <el-form :model="auditTable" label-width="120" label-position="left" class="df fdc aic">
        <el-form-item label="车牌号：" style="width: 60%">
          <el-input v-model="auditTable.carInfo.value.号牌号码" disabled />
        </el-form-item>
        <el-form-item label="车辆类型：" style="width: 60%">
          <el-input v-model="auditTable.carInfo.value.车辆类型" disabled />
        </el-form-item>
        <el-form-item label="车辆品牌：" style="width: 60%">
          <el-input v-model="auditTable.brand" disabled />
        </el-form-item>
        <el-form-item label="审核状态：" style="width: 60%">
          <el-select v-model="auditTable.monited" placeholder="审核状态" style="width: 100%">
            <el-option label="未监销" value="0" />
            <el-option label="同意监销" value="1" />
            <el-option label="拒绝监销" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="auditTable.monited == 1" label="监销图片：" style="width: 60%">
          <el-upload action="#" list-type="picture-card" :auto-upload="false" v-model:file-list="uploadContractImg"
            :on-change="changeFile" :limit="4">
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="拒绝原因：" v-if="auditTable.monited == 2" style="width: 60%">
          <el-input v-model="auditTable.rejectReason" type="textarea" placeholder="拒绝原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" plain @click="checkcenterDialogVisible = false">取消</el-button>
        <el-button v-if="auditTable.monited == 2" type="primary" plain @click="monitedRefuse">拒绝</el-button>
        <el-button v-if="auditTable.monited == 1" type="primary" @click="monitedPass">&nbsp;通过&nbsp;</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="EnlargePictureGs" align-center width="70%">
      <div style="height: 70vh; width: 100%; background-color: #fff; overflow-y: scroll">
        <img style="width: 100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue';
import { Edit, Close } from '@element-plus/icons-vue';
import {
  RequestScrapCarGetlistlimit,
  RequestScrapCaroutputExcelMonited,
  RequestEmployeeGetFunctionAuthorize,
  RequestScrapCarMonitedSetBack,
  RequestScrapCarMonitedRefuse,
  RequestScrapCarMonitedPass,
} from '@/api/path/index.js';
import { Delete, Download, Warning, Plus, ZoomIn } from '@element-plus/icons-vue';
import { formatTime, formatTimeHan } from '../../../filters/index';
import { ElMessage } from 'element-plus';
import useAuthorize from '@/hooks/authorize';
import { exportFile } from '@/utils/exportFile.js';
import { pathToBase64 } from 'image-tools';

let roleList = useAuthorize();
/*------------------------------------- 按钮权限 -------------------------------------*/
// import { useRouter } from 'vue-router';
// const authorizeFlag = ref<any>()
const dialogVisibleImg = ref<any>(false);
const checkcenterDialogVisible = ref<any>(false);
const ImgdialogImageUrl = ref<any>('');
const previewCarImg = (e: any) => {
  dialogVisibleImg.value = true;
  ImgdialogImageUrl.value = e;
};
/*************************************** 查询 ***************************************/
const searchData = ref<any>({
  carId: '',
  carType: '',
  brand: '',
  ifWeight: '',
  pretreated: '',
  ifMonitor: '',
  haveSheet: '',
});
const searchDataBtn = () => {
  getData();
};
/*************************************** 重置 ***************************************/
const resc = () => {
  (searchData.value.carId = ''),
    (searchData.value.carType = ''),
    (searchData.value.brand = ''),
    (searchData.value.ifWeight = ''),
    (searchData.value.pretreated = ''),
    (searchData.value.haveSheet = ''),
    (searchData.value.monited = ''),
    currentPage.value = 1
  getData();
};
const tableData = ref<any>([]);
const seeCenterDialogVisible = ref<any>(false);
/* 分页器 */
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  // getData()
  searchDataBtn();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  // getData()
  searchDataBtn();
};
/* ************* 获取列表数据 ************* */
const total = ref<any>(1);
const currentPage = ref(1);
const pageSize = ref(10);
const getData = () => {
  RequestScrapCarGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    carId: searchData.value.carId,
    carType: searchData.value.carType,
    brand: searchData.value.brand,
    ifWeight: searchData.value.ifWeight,
    pretreated: searchData.value.pretreated,
    monited: searchData.value.monited,
    ifMonitor: true,
    haveSheet: searchData.value.haveSheet,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.carInfo.value = JSON.parse(item.carInfo.value);
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
    // console.log(tableData.value);
  });
};
getData();
/* ************* 确认完成监销 ************* */
const auditTable = ref<any>({});
const confirm = (row: any) => {
  row.monited = JSON.stringify(row.monited);
  console.log(row);
  auditTable.value = row;
  checkcenterDialogVisible.value = true;
  // RequestScrapCarMonited(row.id).then((res: any) => {
  //     if (res.success == true) {
  //         ElMessage.success('已完成监销')
  //         getData()
  //     } else {
  //         ElMessage.error(res.resultObj)
  //     }
  // })
};
// 同意
/* ******************** 监销图片上传 *********************/
const uploadContractImg = ref<any>([]);
const changeFile = (file: any) => {
  uploadContractImg.value.push(file);
};
// const handleRemove1 = (file: any) => {
//   uploadContractImg.value = uploadContractImg.value.filter(
//     (val: any) => val.name !== file.raw.name
//   );
// };
const dialogImageUrl = ref('');
const EnlargePictureGs = ref<any>(false);
const handlePictureCardPreview = (file: any) => {
  dialogImageUrl.value = file.url!;
  EnlargePictureGs.value = true;
};
const monitedPass = async () => {
  for (let i = 0; i < uploadContractImg.value.length; i++) {
    uploadContractImg.value[i] = await pathToBase64(uploadContractImg.value[i].url);
  }
  let res = await RequestScrapCarMonitedPass({
    carId: auditTable.value.id,
    monitedImg: uploadContractImg.value,
  });
  if (res.success == true) {
    ElMessage.success('已完成监销');
    checkcenterDialogVisible.value = false;
    uploadContractImg.value = [];
    getData();
  } else {
    ElMessage.error(res.resultObj);
  }
  // RequestScrapCarMonitedPass({
  //   carId: auditTable.value.id,
  //   monitedImg: uploadContractImg.value,
  // }).then((res: any) => {
  //   if (res.success == true) {
  //     ElMessage.success("已完成监销");
  //     checkcenterDialogVisible.value = false;
  //     getData();
  //   } else {
  //     ElMessage.error(res.resultObj);
  //   }
  // });
};
// 拒绝
const monitedRefuse = () => {
  console.log(auditTable.value.rejectReason);
  if (auditTable.value.rejectReason == undefined) {
    ElMessage.error('请填写拒绝原因');
  } else {
    RequestScrapCarMonitedRefuse(auditTable.value.id, auditTable.value.rejectReason).then((res: any) => {
      if (res.success == true) {
        ElMessage.success('已完成监销');
        checkcenterDialogVisible.value = false;
        getData();
      } else {
        ElMessage.error(res.resultObj);
      }
    });
  }
};
const cancel = (row: any) => {
  RequestScrapCarMonitedSetBack(row.id).then((res: any) => {
    if (res.success == true) {
      ElMessage.success('撤销成功');
      getData();
    } else {
      ElMessage.error(res.resultObj);
    }
  });
};
const closeDialog = () => {
  // auditTable.value={}
  getData();
};

/*------------------------------ 导出所有信息 ------------------------------*/
const exportExcel = () => {
  let nowDate = formatTimeHan(new Date());
  RequestScrapCaroutputExcelMonited({
    page: 1,
    rows: 100000,
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出');
    } else {
      exportFile(res, `${nowDate}监销车辆数据报表`);
    }
  });
};
</script>

<style scoped lang="scss">
.rechargeType_li_hover {
  color: #fff;
  background-color: #116cf8;
  user-select: none;
  cursor: pointer;
  width: 32%;
  padding: 1rem 0;
  text-align: center;
  border-radius: 0.625rem;
}

.recharge {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  position: absolute;
  top: 0;
  left: 0;

  .left {
    width: 40%;
    height: 100%;
    border-radius: 1rem 0 0 1rem;
    background: url('../../../assets/images/bg_Recharge.png') no-repeat left;
    background-size: cover;
  }

  .right {
    flex: 1;
    height: 100%;
    border-radius: 0 1rem 1rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #ecf5ff 1%, #ffffff 100%);

    .rechargeType {
      .rechargeType_li {
        user-select: none;
        cursor: pointer;
        width: 32%;
        padding: 1rem 0;
        text-align: center;
        color: #333333;
        background-color: #fff;
        border-radius: 0.625rem;

        &:hover {
          color: #fff;
          background-color: #116cf8;
          transition: 500ms;
        }
      }
    }

    .rechargeMoney_li_hover {
      width: 32%;
      padding: 1rem 0;
      // margin-bottom: 0.625rem;
      margin-top: 0.625rem;
      background-color: red;
      text-align: center;
      background: #e1f0ff;
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      border: 0.0625rem solid #116cf8;
      user-select: none;
      cursor: pointer;
      transition: 500ms;

      p {
        font-size: 0.75rem;
        font-weight: 400;
        color: #333333;

        &:first-child {
          font-size: 1.25rem;
          font-weight: 600;
          color: #116cf8;
          margin-bottom: 0.625rem;

          span {
            font-size: 0.875rem;
            color: #116cf8;
          }
        }
      }
    }

    .rechargeMoney {
      .rechargeMoney_li {
        width: 32%;
        user-select: none;
        cursor: pointer;
        background: #ffffff;
        box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(226, 234, 243, 0.3);
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        opacity: 1;
        text-align: center;
        padding: 1rem;
        // margin-bottom: 0.625rem;
        border: 0.0625rem solid #ffffff;
        margin-top: 0.625rem;

        p {
          font-size: 0.75rem;
          font-weight: 400;
          color: #b2b2b2;

          &:first-child {
            font-size: 1.25rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 0.625rem;

            span {
              font-size: 0.875rem;
              color: #333333;
            }
          }
        }

        &:hover {
          background-color: red;
          text-align: center;
          background: #e1f0ff;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          border: 0.0625rem solid #116cf8;
          user-select: none;
          cursor: pointer;
          transition: 500ms;

          p {
            font-size: 0.75rem;
            font-weight: 400;
            color: #333333;

            &:first-child {
              font-size: 1.25rem;
              font-weight: 600;
              color: #116cf8;
              margin-bottom: 0.625rem;

              span {
                font-size: 0.875rem;
                color: #116cf8;
              }
            }
          }
        }
      }
    }
  }
}

.part {
  background-color: #f5f7fb;
  width: 100%;
  height: 1.875rem;
  line-height: 1.875rem;
  padding-left: 0.625rem;
}

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0 !important;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }
}

::v-deep .imgVisible {
  .el-dialog__body {
    padding: 0;
  }

  .el-icon svg {
    opacity: 0;
  }

  .el-dialog__header {
    padding: 0 !important;
    margin: 0 !important;
  }
}

.carImg {
  width: 4.375rem;
  height: 4.375rem;
  margin-right: 0.625rem;
  border-radius: 0.25rem;
}

/* 上传框 */
::v-deep .upload {
  width: 81.92px;
  height: 81.92px;
  border-radius: 6px;
  background-color: #fafafa;
  overflow: hidden;
  border: 1px dashed #cdd0d6;
  position: relative;

  .el-upload-list__item,
  .el-upload-list__item-thumbnail,
  .el-upload {
    width: 80px;
    height: 80px;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions {
    width: 80px;
    height: 80px;
  }

  .el-upload {
    opacity: 0;
  }
}

.upload:hover {
  border: 1px dashed #116cf8;
  transition: 500ms;
}

::v-deep .up {
  width: 81.92px;
  height: 81.92px;
}
</style>
